<template>



  <div>
    开始学习
    <div class="course_content">
      <div class="wrapper_containers_left">


      </div>

      <!--右侧-->
      <div class="wrapper_containers_right">
        <div class="beginExam_inf">

          <Row>
            <Col span="24">
            <i></i>
            <h3 class="headNameRight">炼油装置装置简介</h3>
            </Col>
          </Row>
          <br />
          <Row>
            <Col span="12">
            <span class="persent50">创建人：某某某</span>
            </Col>
            <Col span="12">
            <span class="persent50">总时长：30分钟</span>
            </Col>
          </Row>
          <br />
          <Row>
            <Col span="24">
            <span>所属机构：总公司</span>
            </Col>
          </Row>
          <br />
          <Row>
            <Col span="12">
            <span class="persent50">总期次：1期</span>
            </Col>
            <Col span="12">
            <span class="persent50">可学习期次：第
		        		<select class="pull-down" name="">
                  <option value="">01</option>
                  <option value="">02</option>
						    </select>期
					</span>
            </Col>
          </Row>

          <div class="catalog">
            课件目录
            <span class="study_time_my" id="contdown">课时已学够</span>
          </div>
        </div>

        <ul class="courseListUl">
          <li class="courseListLi">
            <Row>
              <Col span="4">
              <span>课件</span>
              </Col>
              <Col span="10">
              <span class="courseName" title="常减压装置三维模拟视频简介">常减压装置三维模拟视频简介</span>
              </Col>
              <Col span="6">
              <span class="courseTypes">视频</span>
              </Col>
              <Col span="6">
              <span class="video videoStyle"></span>
              </Col>

            </Row>
          </li>



        </ul>
      </div>



    </div>


  </div>




</template>


<script>
  var ezjsUtil = Vue.ezjsUtil;
  var apiConstants = ezjsUtil.constants.api;
  export default {
    data () {
      return {

      }
    },
    methods:{
      startLearning(){
        this.$router.push('/startLearning');
      },
    }
  }
</script>

<style lang="less">
  body{
    font-size:16px;
  }
  .course_content {
    height: calc(100% - 40px);
    .wrapper_containers_left {
      width: 70%;
      height: calc(100% - 20px);
      border: 1px solid #bbb;
      border-radius: 10px;
      background-color: #fff;
      margin: 0 2%;
      float: left;
      padding-top: 10px;



      }
    .wrapper_containers_right {
      width: 24%;
      height: calc(100% - 20px);
      border: 1px solid #bbb;
      border-radius: 10px;
      background-color: #fff;
      float: left;
      .beginExam_inf{
        position: relative;
        height: 170px;
        i{
          display: block;
          width: 10px;
          height: 30px;
          background: #FF481D;
          position: absolute;
          top: -1px;
        }
        .headNameRight{
          padding-left:15px;
        }
        .info_list{
          padding-left: 20px;
          padding-top: 10px;
          overflow: hidden;
          span{
            float: left;
          }
        }
        .catalog{
          width:100%;
          float: left;
          height: 26px;
          color: #333;
          line-height: 26px;
          padding-left: 20px;
          border-bottom: 1px solid #bbb;
          background: url(../../../../../assets/images/indexImg/classmateRectangular.png) no-repeat;
        }
        .study_time_my{
          float: right;
          font-size: 20px;
          color: #018dd6;
        }
      }
      .courseListUl{
        width:100%;
        height: 100%;
        overflow: hidden;
        overflow-y: auto;
        .courseListLi{
          width:100%;
          position: relative;
          line-height: 35px;
          padding-left: 25px;
          cursor: pointer;
          color: #FF481D;
          background: url(../../../../../assets/images/indexImg/Examicon.png) no-repeat left center;
          .courseName{
            display: inline-block;
            width: 160px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            position: absolute;
          }
          .courseTypes{
            position: absolute;
            margin-left: 174px;
            width: 35px;
          }
          .video{
            position: absolute;
            top: 8px;
            right: -165px;
            width: 18px;
            height: 18px;
            background: url(../../../../../assets/images/indexImg/videoHover.png) no-repeat;
          }
        }
      }



    }

  }


</style>
